﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <link rel="stylesheet" type="text/css" href="../../static/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../static/sr/srui.css" />
    <link rel="stylesheet" type="text/css" href="../../lib/bootstrap-validator/css/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css">
    <script type="text/javascript" src="../../lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
    <script type="text/javascript" src="../../static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../lib/bootstrap-validator/js/bootstrapValidator.min.js"></script>
    <script src="../../lib/echart/js/echarts.js"></script>
</head>

    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <div class="doc-section">
                    <h2 class="page-header">Echart</h2>
                </div>

                <div class="doc-section">
                    <h3 class="page-header">图表</h3>
                    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
                </div>

                <div class="doc-section">
                    <h3 class="page-header">地图</h3>
                    <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
                </div>
            </div>
        </div>
    </div>

    
    <!--Step:2 引入echarts.js-->
    
    <script type="text/javascript">
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths: {
            echarts: '../../lib/echart/./js'
        }
    });
    
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/map'
        ],
        function (ec) {
            //--- 折柱 ---
            var myChart = ec.init(document.getElementById('main'));
            myChart.setOption({
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['蒸发量','降水量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                series : [
                    {
                        name:'蒸发量',
                        type:'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name:'降水量',
                        type:'bar',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
            });
            
            // --- 地图 ---
            var myChart2 = ec.init(document.getElementById('mainMap'));
            myChart2.setOption({
                tooltip : {
                    trigger: 'item',
                    formatter: '{b}'
                },
                series : [
                    {
                        name: '中国',
                        type: 'map',
                        mapType: 'china',
                        selectedMode : 'multiple',
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:[
                            {name:'广东',selected:true}
                        ]
                    }
                ]
            });
        }
    );
    </script>
</body>
</html>